<script setup name="Chat" lang="ts">
import {getCurrentInstance, getCurrentScope, onMounted, ref} from "vue";
import {getAnswer} from "@/api/chat.ts";

let input_data = ref<string>("")
let component = getCurrentInstance();
// 动画到时候用gzap做
let chatWrapper = ref<HTMLElement>(null);
let chatContainer = ref<HTMLElement>(null)
let answer = ref<HTMLElement>(null);
let problems = ref<HTMLElement>(null);
let input = ref<HTMLElement>(null);
onMounted(() => {
  chatContainer.value.style.opacity = "1";
})
// 创建问题和answer
const createChatMessage = (text: string, className: string, removeElement?: HTMLElement): HTMLElement => {
  let item: HTMLElement = document.createElement("span");
  if (removeElement) {
    chatWrapper.value.removeChild(removeElement);
  }
  item.textContent = text;
  item.classList.add(className)
  chatWrapper.value.insertBefore(item, input.value)
  return item
}

const displayChatWrapper = () => {
  chatWrapper.value.style.opacity ="1"
}
const hideChatContainer=(e)=>{
  e.target.parentNode.style.opacity="0"
}

const chatWithModel = async (e) => {
  // 好像只有all可以拿到实时
  problems.value = document.querySelectorAll(".chatView.ip_logo .problems")[0] as HTMLElement;
  answer.value = document.querySelectorAll(".chatView.ip_logo .answer")[0] as HTMLElement;
  chatWrapper.value = document.querySelectorAll(".chatView.ip_logo .chat")[0] as HTMLElement;
  problems.value = createChatMessage(input_data.value, "problems", problems.value)
  let data = await getAnswer(input_data.value)
  problems.value = createChatMessage(data, "answer", answer.value)
  console.log(data)

}
</script>

<template>
  <div ref="chatContainer" class="ip_logo chatView">
    <img @click="displayChatWrapper" src="@/assets/home/ip_logo.png" alt="">
    <div ref="chatWrapper" class="chat">
      <div @click="hideChatContainer" class="close">×</div>
<!--      <span ref="answer" class="answer">{{ input_data }}</span>-->
      <span ref="problems" class="problems">请问你有什么问题</span>
      <input ref="input" v-model="input_data  " @keydown.enter="chatWithModel" class="input"
             placeholder="请输入你的问题" type="text">
    </div>
  </div>
</template>

<style lang="scss">

.chatView.ip_logo {
  $chat-font-size: 1vw;

  position: fixed;
  z-index: 10;
  top: 30%;
  right: 0;
  transform: translate(0, -50%);
  width: 15vw;
  font-size: $chat-font-size;

  img {
    position: absolute;
    z-index: 11;
    top: -2vw;
    width: 8vw;
    height: auto;
    display: block;
    right:0;
  }

  .chat {

    position: absolute;
    left: -120%;
    top: 10%;
    padding: 0 2vw 2vw 1vw;
    display: flex;
    width: 27vw;
    flex-flow: column wrap;
    justify-content: space-around;
    overflow-y: auto;
    background-color: white;
    box-shadow: inset 1px 1px 0px -3px white,
    1px 1px 5px -2px rgba(0, 0, 0, .5),
    10px 8px 16px -9px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    .close{
    position: absolute;
      z-index:20;
      right:2%;
      top:1%;
      font-size:2rem;
      border:1px solid white;
      border-radius: 40%;
      padding:2px;
      background-color:rgba(255,0,0,.5);
      color:white;


    }
    .input {
      width: 100%;
      height: 3rem;
      outline: none;
      border: none;
      margin-top: 10%;
      border-bottom: 1px solid #ccc;
      background-color: transparent;
      padding-left: 1em;
      color:green;
    }

    .answer, .problems {
      display: inline-block;
      margin-top: 5%;
      font-size: $chat-font-size *0.8;
      padding: 4px 1em;
      background-color: white;
      max-width: 16vw;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: inset 1px 1px 0px -3px white,
      1px 1px 5px -2px rgba(0, 0, 0, .5),
      10px 8px 16px -9px rgba(0, 0, 0, 0.3);

    }

    .answer {
      justify-content: flex-end;
      margin-left: auto;
      //clip-path: polygon(90% 0, 100% 51%, 90% 100%, 0 100%, 0 0);
      //animation:appear 2s infinite;
    }

    .problems {

      margin-right: auto;
    }

    //@keyframes appear {
    //  0%{
    //    max-width: 0;
    //  }
    //  100%{
    //    max-width:fit-content;
    //  }
    //}
  }

}
</style>